<template>
  <view class="normal-login-container" style="width: 100%">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="交强险信息" type="line"/>
      </view>

      <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                 labelWidth="auto">

        <uni-forms-item label="租赁禀议保险公司:">
          <uni-easyinput v-if="boole" v-model="ruleForm.rentInsuranceCompany" disabled
                         placeholder="请输入租赁禀议保险公司"/>
          <text v-else> {{ ruleForm.rentInsuranceCompany || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="投保渠道:">
          <zxz-uni-data-select v-if="boole" v-model="ruleForm.insuranceChannels.toString()"
                               :localdata="insuranceList" dataKey="label" dataValue="value"
                               disabled/>
          <text v-else> {{ handleLabel(insuranceList, ruleForm.insuranceChannels) }}
          </text>
        </uni-forms-item>

        <uni-forms-item label="被保险人:" name="syxInsuredName" :required="boole"
                        :rules="[{required:true, errorMessage: '请输入被保险人',validateTrigger:'blur'}]">
          <text class="syxInsuredName"/>
          <uni-easyinput v-if="boole" v-model="ruleForm.syxInsuredName" placeholder="请输入被保险人"/>
          <text v-else> {{ ruleForm.syxInsuredName || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险公司:" name="jqxCompanyId" :required="boole"
                        :rules="[{required:true, errorMessage: '请选择交强险公司',validateTrigger:'bind'}]">
          <text class="jqxCompanyId"/>
          <zxz-uni-data-select v-if="boole" v-model="ruleForm.jqxCompanyId" :localdata="options"
                               dataKey="supplierName" dataValue="supplierId"
                               placeholder="请选择交强险公司"
                               @change="handleJqx"
                               :clear="true" filterable/>
          <text v-else>{{ ruleForm.jqxCompany || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险公司编码:" name="jqxCompanyCode" :required="boole"
                        :rules="[{required:true, errorMessage: '请输入交强险公司编码',validateTrigger:'blur'}]">
          <text class="jqxCompanyCode"/>
          <uni-easyinput v-if="boole" disabled v-model="ruleForm.jqxCompanyCode" placeholder="请输入交强险公司编码"/>
          <text v-else> {{ ruleForm.jqxCompanyCode || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险起保日:" name="jqxExpectBeginTime" :required="boole"
                        :rules="[{required:true, errorMessage: '请选择交强险起保日',validateTrigger:'bind'}]">
          <text class="jqxExpectBeginTime"/>
          <uni-datetime-picker v-if="boole" type="date" placeholder="请选择交强险起保日"
                               @change="handleTime"
                               return-type="string" v-model="ruleForm.jqxExpectBeginTime"/>
          <text v-else> {{ ruleForm.jqxExpectBeginTime || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险到期日:" name="jqxExpectEndTime" :required="boole"
                        :rules="[{required:true, errorMessage: '请选择交强险到期日',validateTrigger:'bind'}]">
          <text class="jqxExpectEndTime"/>
          <uni-datetime-picker v-if="boole" type="date" placeholder="请选择交强险到期日"
                               :start="handleEffectDate(ruleForm.jqxExpectBeginTime)"
                               return-type="string" v-model="ruleForm.jqxExpectEndTime"/>
          <text v-else> {{ ruleForm.jqxExpectEndTime || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险性质:" name="jqxInsuranceType" :required="boole"
                        :rules="[{required:true, errorMessage: '请选择交强险性质',validateTrigger:'bind'}]">
          <text class="jqxInsuranceType"/>
          <uni-data-select v-if="boole" v-model="ruleForm.jqxInsuranceType" :localdata="range"
                           @change="handleInsuranceType"
                           placeholder="请选择交强险性质" :clear="true" filterable/>
          <text v-else> {{
              ruleForm.jqxInsuranceType == '1' ? '运营' : ruleForm.jqxInsuranceType == '2' ? '非运营' : ''
            }}
          </text>
        </uni-forms-item>

        <uni-forms-item label="交强险保费:" name="jqxAmount" :required="boole"
                        :rules="[{required:true, errorMessage: '请输入交强险保费',validateTrigger:'blur'}]">
          <text class="jqxAmount"/>
          <uni-easyinput v-if="boole" v-model="ruleForm.jqxAmount"
                         @clear="clear('jqxAmount')"
                         @blur="blurAmount('jqxAmount')"
                         placeholder="请输入交强险保费"/>
          <text v-else> {{ ruleForm.jqxAmount || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="车船税是否缴纳:" name="carTaxStatus" :required="boole"
                        :rules="[{required:true, errorMessage: '车船税是否缴纳',validateTrigger:'bind'}]">
          <text class="carTaxStatus"/>
          <uni-data-checkbox v-if="boole" v-model="ruleForm.carTaxStatus" :localdata="carTaxList"/>
          <text v-else> {{
              Number(ruleForm.carTaxStatus) === 1 ? '是' : Number(ruleForm.carTaxStatus) === 2 ? '否' : ""
            }}
          </text>
        </uni-forms-item>

        <uni-forms-item label="车船税:" name="carTax" :required="boole"
                        v-if="Number(ruleForm.carTaxStatus) === 1"
                        :rules="[{required:true, errorMessage: '请输入车船税',validateTrigger:'blur'}]">
          <text class="carTax"/>
          <uni-easyinput v-if="boole" v-model="ruleForm.carTax"
                         @clear="clear('carTax')"
                         @blur="blurAmount('carTax')"
                         placeholder="请输入车船税"/>
          <text v-else> {{ ruleForm.carTax || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险保单号:" name="jqxPolicyCode" :required="boole"
                        :rules="[{required:true, errorMessage: '请输入交强险保单号',validateTrigger:'blur'}]">
          <text class="jqxAmount"/>
          <uni-easyinput v-if="boole" v-model="ruleForm.jqxPolicyCode" @blur="handlePolicyCode(ruleForm.jqxPolicyCode)"
                         placeholder="请输入保单号"/>
          <text v-else> {{ ruleForm.jqxPolicyCode || '-' }}</text>
        </uni-forms-item>

        <uni-forms-item label="交强险保单:" name="jqxPolicyUrl" :required="boole"
                        :rules="[{required:true,errorMessage:'上传交强险保单',validateTrigger: 'blur'}]">
          <text class="jqxPolicyUrl"/>
          <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.jqxPolicyUrl"/>
        </uni-forms-item>

      </uni-forms>
    </view>
  </view>
</template>

<script>
export default {
  name: 'jqxplInfo',//交强险信息
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Array,
      default: [],
    },
    insuranceList: {
      type: Array,
      default: [],
    },
    tableList: {
      type: Array,
      default: [],
    },
    index: {
      type: Number,
      default: -1,
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {
    'value.jqxPolicyUrl': {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate(['jqxPolicyUrl'])
        }
      },
      deep: true,
    }
  },
  data() {
    return {
      range: [
        {value: "1", text: "运营"},
        {value: "2", text: "非运营"},
      ],
      carTaxList: [
        {value: 1, text: "是"},
        {value: 2, text: "否"},
      ],
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    handleEffectDate(val) {
      let date = new Date(val)
      return date.setDate(date.getDate() + 1);
    },

    //公司
    handleJqx(val) {
      if (val) {
        this.value.jqxCompanyId = this.ruleForm.jqxCompanyId = val.supplierId
        this.value.syxCompanyId = this.ruleForm.syxCompanyId = val.supplierId
        this.value.jqxCompany = this.ruleForm.jqxCompany = val.supplierName
        this.value.syxCompany = this.ruleForm.syxCompany = val.supplierName
        this.value.jqxCompanyCode = this.ruleForm.jqxCompanyCode = val.supplierCode
        this.value.syxCompanyCode = this.ruleForm.syxCompanyCode = val.supplierCode
      }
    },

    //性质
    handleInsuranceType(val) {
      if (val) {
        this.value.jqxInsuranceType = this.ruleForm.jqxInsuranceType = val
        this.value.syxInsuranceType = this.ruleForm.syxInsuranceType = val
      }
    },

    //起保日
    handleTime(time) {
      let timeDate = this.addOneMonth(time, 12)
      this.ruleForm.jqxExpectBeginTime = this.value.jqxExpectBeginTime = time
      this.$set(this.ruleForm, 'jqxExpectEndTime', timeDate)
      this.$set(this.value, 'jqxExpectEndTime', timeDate)
      this.$set(this.value, 'syxExpectBeginTime', time)
      this.$set(this.value, 'syxExpectEndTime', timeDate)
      this.$set(this.ruleForm, 'syxExpectBeginTime', time)
      this.$set(this.ruleForm, 'syxExpectEndTime', timeDate)
    },

    addOneMonth(dateString, month) {
      const date = new Date(dateString);
      date.setMonth(date.getMonth() + Number(month));
      date.setDate(date.getDate() - 1);
      return date.toISOString().split("T")[0]; // 返回YYYY-MM-DD格式的日期字符串
    },


    blurAmount(str) {
      if (this.ruleForm[str]) {
        let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = "";
        } else {
          this.ruleForm[str] = this.ruleForm[str]
              .toString()
              .match(/^\d+(?:\.\d{0,2})?/)[0];
        }
      }
    },

    clear(str){
      this.value[str] = this.ruleForm[str] = ''
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate().then((res) => {
          resolve();
        }).catch((err) => {
          let key = ".flex-col" + ">>>" + "." + err[0].key;
          let obj = {
            e: key,
            i: this.index
          }
          reject(obj);
        });
      });
    },

    handlePolicyCode(val) {
      if (val) {

        const hasPolicyCode = this.tableList.some(item => [item.jqxPolicyCode, item.syxPolicyCode].includes(val));
        const booleCode = val === this.value.syxPolicyCode
        this.value.jqxPolicyCode = this.ruleForm.jqxPolicyCode = hasPolicyCode || booleCode ? '' : val;
      }
    }
  },
};
</script>

<style scoped lang=""></style>


